import { useState } from "react";
import qs from "qs"
import { Form, Input, Button, Checkbox  } from "antd";
import http from "./../http/http";
import Notice from "../notice/Notice";
const PassLogin = (props) => {
  const onFinish = (values) => {
    // console.log(props);
    console.log("Success:", values);
    let username =values.username;
          let password = values.password;
          let imageCode = values.imgcode;
          let obj = { username, password, imageCode };
    http({
      method: "post",
      url: "/login/loginByUsername",
      data: qs.stringify(obj),
    })
    .then((res) => {
      // console.log(res);
      if (res.data.code === 0) {
        sessionStorage.setItem("token", res.data.data);
        Notice('success','登录成功','')
        // 跳页面
        
        props.props.history.push('/Main')
      } else {
        Notice('error','登录失败','请重新登录')
      }
    })
    .catch((err) => {
      console.log(err);
      Notice('error','网络异常','请检查网络后重新登录')
    });
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const [imgUrl, setImgUrl] = useState(
    "http://110.40.139.181:8080/admin/login/sendImageCode"
  );
  const changeImgCode = () => {
    setImgUrl(
      "http://110.40.139.181:8080/admin/login/sendImageCode?" +
        new Date().getTime()
    );
  };

  return (
    <Form
      className="form"
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 16,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: "Please input your username!",
          },
        ]}
      >
        <Input autoComplete="true" />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: "Please input your password!",
          },
        ]}
      >
        <Input.Password autoComplete="true" />
      </Form.Item>
      <Form.Item
        label="验证码"
        name="imgcode"
        className="imgbox"
        rules={[
          {
            required: true,
            message: "Please input your imgcode!",
          },
        ]}
      >
        <Input autoComplete="true" />
      </Form.Item>
      {imgUrl ? (
        <img onClick={changeImgCode} src={imgUrl} className="imgcode" alt="" />
      ) : (
        ""
      )}
      <Form.Item
        name="remember"
        valuePropName="checked"
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
  );
};

export default PassLogin;
